<template>
  <nav class="mui-bar mui-bar-tab">
    <a id="defaultTab" class="mui-tab-item mui-active"
       @click="toHome()">
      <span class="mui-icon mui-icon-home"></span>
      <span class="mui-tab-label">首页</span>
    </a>
    <a  class="mui-tab-item" href="template/controls.html">
      <span class="mui-icon mui-icon-checkbox"></span>
      <span class="mui-tab-label">应用</span>
    </a>
    <a class="mui-tab-item" href="template/chat.html">
      <span class="mui-icon mui-icon-email">
        <span class="mui-badge" v-if="tagNum">{{tagNum}}</span>
      </span>
      <span class="mui-tab-label">发现</span>
    </a>
    <a class="mui-tab-item" @click="toMine()">
      <span class="mui-icon mui-icon-person"></span>
      <span class="mui-tab-label">我的</span>
    </a>
  </nav>
</template>


<script>

  export default {
    name: "Header",
    components: {
      //someComponent
    },
    props: {},
    data() {
      return {
        msg: "Hello Vue.js",
        tagNum:0
      }
    },
    computed: {},
    watch: {},
    mounted: function () {

    },
    methods: {
      toHome(){
       this.$router.push("/");
      },
      toMine(){
       this.$router.push("/mine");
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*h1, h2 {*/
  /*  font-weight: normal;*/
  /*}*/
  /*ul {*/
  /*  list-style-type: none;*/
  /*  padding: 0;*/
  /*}*/
  /*li {*/
  /*  display: inline-block;*/
  /*  margin: 0 10px;*/
  /*}*/
  /*a {*/
  /*  color: #42b983;*/
  /*}*/
</style>
